<template>
    <div class="clist">
        <ul>
            <li v-for="(l,i) in list" :key="i" class="wow zoomInDown" :data-wow-delay=" i*100+'ms'">
                <router-link :to="{
                    name:'cinema-detail',
                    params:{
                        cinemaId:l.cinemaId,
                        filmId:filmId,
                        date:date
                    }
                }"   class="citem">
                    <div class="one">
                        <div class="name">{{l.name}}</div>
                        <div class="price">¥{{(l.lowPrice/100).toFixed(1)}}起</div>
                    </div>
                    <div class="two">
                        <div class="address">{{l.address}}</div>
                        <div class="dis">{{'距离未知'}}</div>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:{
        list:Array,
        filmId:Number,
        date:Number
    }
}
</script>


<style lang="scss" scoped>
.clist{
    width:100%;
    padding-bottom: 50px;
    ul{

        li{
            .citem{
                width: 100%;
                border-bottom: 0.5px solid #ededed;
                position: relative;
                background-color: #fff;
                padding: 15px;
                display: block;
                .one, .two{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .name{
                        color: #191a1b;
                        font-size: 15px;
                        float: left;
                    }
                    .address{
                        color: #797d82;
                        font-size: 12px;
                        margin-top: 5px;
                        width:280px;
                        display: block;
                        overflow: hidden;
                        -o-text-overflow: ellipsis;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .price{
                        font-size: 13px;
                        color: #ff5f16;
                        height: 0!important;
                        display: inline-table!important;
                    }
                    .dis{
                        font-weight: 400;
                        display: block;
                        margin-top: 5px;
                        color: #797d82;
                    }
                }
            }
        }
    }
}
</style>